<template>
	<div class="energyDataCollection-page">
		<div class="energyDataCollection-page-search">
			<el-input
				class="search-input"
				placeholder="请输入设备名称"
				v-model="searchData.deviceName"></el-input>
			<el-input
				class="search-input ml-10"
				placeholder="请输入日期"
				v-model="searchData.dates"></el-input>
			<SearchOrReset @reset="resetSearch" @getTableData="getTableData"></SearchOrReset>
		</div>
		<div class="energyDataCollection-page-table mt-10">
			<public-table :tableData="tableData" :tableHeader="columnObj"> </public-table>
		</div>
		<div class="energyDataCollection-page-paging mt-10">
			<el-pagination
				:page-sizes="[5, 10, 15, 20]"
				layout="total,sizes,prev,pager,next,jumper"
				:total="total"
				:page-size="pageSize"
				:current-page="pageNum"
				@size-change="pageSizeChange"
				@current-change="pageCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { getBaseData } from "@/api/Common";
import SearchOrReset from "@/components/Buttons/SearchOrReset.vue";
import PublicTable from "../../components/Tables/PublicTable.vue";
export default {
	name: "EnergyDataCollection",
	components: {
		SearchOrReset,
		PublicTable,
	},
	data() {
		return {
			searchData: {
				deviceName: "",
				dates: "",
			},
			tableData: [],
			columnObj: [],
			total: 0,
			pageSize: 0,
			pageNum: 0,
		};
	},
	created() {
		this.getTableData();
	},
	methods: {
		getTableData() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				equipmentName: this.searchData.deviceName,
				createTime: this.searchData.dates,
			};
			getBaseData("/energyConsumptionData/search", params)
				.then((res) => {
					console.log(res);
					this.tableData = res.data.list;
					this.total = res.data.total;
					this.setTableColumn();
				})
				.catch((err) => {
					console.log(err);
				});
		},
		// 设置table的所需的表列数据
		setTableColumn() {
			let tableData = this.tableData.map((item) => {
				let {
					equipmentName,
					hasProductionNumber,
					unitPowerConsumption,
					totalPowerConsumption,
					carbonEmissionsPerUnit,
					totalCarbonEmissionUnit,
				} = item;
                return {
					equipmentName,
					hasProductionNumber,
					unitPowerConsumption,
					totalPowerConsumption,
					carbonEmissionsPerUnit,
					totalCarbonEmissionUnit,
				}
			});
			// 获取prop要传的键
			let columns = tableData[0];
			// 设置table的所需的label
			const labelValues = [
				"设备名称",
				"已产数量",
				"单位耗电量",
				"总耗电量",
				"单位碳排放",
				"总碳排放",
			];
			// 生成一个新的数组，含有以下配置项
			let propArray = Object.keys(columns).map((key, index) => {
				return {
					prop: `${key}`,
					label: labelValues[index],
					align: "center",
					width: "",
					text: true,
				};
			});
			this.columnObj = propArray;
		},
		pageSizeChange(pageSize) {
			this.pageSize = pageSize;
		},
		pageCurrentChange(pageNum) {
			this.pageNum = pageNum;
		},
		resetSearch() {
			this.searchData.dates = "", 
            this.searchData.deviceName = ""
            this.getTableData()
		},
	},
};
</script>

<style lang="scss" scoped>
.energyDataCollection-page-search {
	display: flex;
	align-items: center;

	.search-input {
		width: 300px;
	}
}

.energyDataCollection-page-paging {
	text-align: center;
}
</style>
